<template>
  <div class="radarCon">
    <!-- 1加载中  2加载正常  3加载失败 4 无数据 -->
    <div id="container" style="min-width: 100%; height: 5.25rem"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startLoad: true,
      myChart: {},
    };
  },
  props: {
    fundOverview1Data: {
      type: Object,
      default: {},
    },
    fundOverview2Data: {
      type: Object,
      default: {},
    },
    fundName1: {
      type: String,
      default: "",
    },
    fundName2: {
      type: String,
      default: "",
    },
  },
  computed: {
    fundOverviewValue1: function () {
      let arr1 = [];
      arr1[0] =
        this.fundOverview1Data.intervalReturn &&
        this.fundOverview1Data.intervalReturn.score;
      arr1[1] =
        this.fundOverview1Data.maxDrawDown &&
        this.fundOverview1Data.maxDrawDown.score;
      arr1[2] =
        this.fundOverview1Data.maxDrawDown &&
        this.fundOverview1Data.selectionInfo.score;
      arr1[3] =
        this.fundOverview1Data.maxDrawDown &&
        this.fundOverview1Data.sharpe.score;
      arr1[4] =
        this.fundOverview1Data.maxDrawDown &&
        this.fundOverview1Data.timeInfo.score;
      arr1[5] =
        this.fundOverview1Data.maxDrawDown &&
        this.fundOverview1Data.managerExperience.score;
      return arr1;
    },
    fundOverviewValue2: function () {
      let arr2 = [];
      arr2[0] =
        this.fundOverview2Data.intervalReturn &&
        this.fundOverview2Data.intervalReturn.score;
      arr2[1] =
        this.fundOverview2Data.maxDrawDown &&
        this.fundOverview2Data.maxDrawDown.score;
      arr2[2] =
        this.fundOverview2Data.maxDrawDown &&
        this.fundOverview2Data.selectionInfo.score;
      arr2[3] =
        this.fundOverview2Data.maxDrawDown &&
        this.fundOverview2Data.sharpe.score;
      arr2[4] =
        this.fundOverview2Data.maxDrawDown &&
        this.fundOverview2Data.timeInfo.score;
      arr2[5] =
        this.fundOverview2Data.maxDrawDown &&
        this.fundOverview2Data.managerExperience.score;
      return arr2;
    },
  },
  created() {
    this.drawRadar();
  },
  methods: {
    refreshFundDetail() {
      // 获取基金评估指标
      this.$parent.getFundOverview();
    },
    drawRadar() {
      const _this = this;
      this.$nextTick(() => {
        _this.myChart = Highcharts.chart(
          "container",
          {
            chart: {
              polar: true,
              type: "line",
            },
            exporting: {
              enabled: false,
            },
            animation: true,
            title: {
              text: "",
            },
            // 图例（Legend）
            legend: {
              enabled: false,
            },
            // 版权标签（Credits）
            credits: {
              enabled: false,
            },
            pane: {
              size: "86%",
            },
            xAxis: {
              categories: [
                "赚钱能力",
                "抗风险能力",
                "选股能力",
                "攻守兼备能力",
                "择时能力",
                "管理人经验",
              ],
              tickmarkPlacement: "on",
              lineWidth: 0,
              allowDecimals: true,
              labels: {
                enabled: true,
                style: {
                  fontWeight: "400",
                  fontSize: "13px",
                  color: "#666666",
                },
              },
            },
            yAxis: {
              gridLineColor: "#ccc", //网格线颜色
              minorTickLength: 1,
              gridLineInterpolation: "polygon",
              min: 0,
              max: 100,
              tickAmount: 6, //刻度总数
              tickPixelInterval: 20,
              startOnTick: false,
              labels: {
                enabled: false, //去掉刻度数字
              },
            },
            // 提示的弹框内容
            tooltip: {
              shared: true,
              backgroundColor: "rgba(0,0,0)",
              borderColor: "none",
              borderRadius: 12,
              padding: 4,
              useHTML: true,
              headerFormat: "",
              extraCssText: "max-height:400px;overflow:auto;font-size:12px;", //向div一样设置最大高度,超出滚动                       position: function (point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              pointFormatter: function (params) {
                //320小屏特殊处理
                let swidth = Number(parseFloat(window.screen.width).toFixed(2));
                let clientX = Number(parseFloat(this.clientX).toFixed(2));
                this.series.name =
                  this.series.name.length > 8
                    ? this.series.name.substring(0, 8) + "…"
                    : this.series.name;
                this.series.name = this.series.name ? this.series.name : "--";
                //左边240 300 ，右0 60 120 180
                if (
                  clientX == 0 ||
                  clientX == 60 ||
                  clientX == 120 ||
                  clientX == 180
                ) {
                  if (swidth == 320) {
                    if (clientX == 0 || clientX == 180) {
                      //上
                      this.series.name =
                        this.series.name.length > 5
                          ? this.series.name.substring(0, 5) + "…"
                          : this.series.name;
                    }
                  } else {
                    this.series.name =
                      this.series.name.length > 8
                        ? this.series.name.substring(0, 8) + "…"
                        : this.series.name;
                  }
                  return (
                    '<div style="width: 0;height: 0;border-top: 20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid rgba(0, 0, 0);position: absolute;right: -23px; top: -1px;opacity: 1;"><em style="width:.12rem;height:.12rem;border-radius:50%;position:absolute;right:-.13rem;background:#000;top:-.05rem;"></em></div><div style="color: #fff;">' +
                    this.series.name +
                    "<b>&nbsp;&nbsp;" +
                    this.y.toFixed(2) +
                    "分</b><br/></div>"
                  );
                } else if (clientX == 240 || clientX == 300) {
                  return (
                    '<div style="width: 0;height: 0;border-top: 20px solid transparent;border-bottom: 20px solid transparent;border-right: 20px solid rgba(0, 0, 0);position: absolute;left: -23px; top: -1px;opacity: 1;"><em style="width:.12rem;height:.12rem;border-radius:50%;position:absolute;left:-.13rem;background:#000;top:-.05rem;"></em></div><div style="color: #fff;">' +
                    this.series.name +
                    "<b>&nbsp;&nbsp;" +
                    this.y.toFixed(2) +
                    "分</b><br/></div>"
                  );
                }
              },
            },
            // // 设置拐点 点击选择不变化
            plotOptions: {
              series: {
                allowPointSelect: false,
                lineWidth: 0,
                enableMouseTracking: true,
                marker: {
                  enabled: true,
                  radius: 3, //曲线点半径，默认是4
                  symbol: "circle",
                  border: 0,
                  states: {
                    hover: {
                      enabled: true,
                    },
                    select: {
                      enabled: true,
                    },
                  },
                  lineWidth: 0, //线条粗细
                },
                states: {
                  hover: {
                    enabled: true,
                    lineWidthPlus: 0,
                  },
                  select: {
                    enabled: true,
                  },
                },
              },
            },
            series: [
              {
                type: "area",
                name: _this.fundName1,
                data: _this.fundOverviewValue1,
                pointPlacement: "on",
                lineWidth: 0, //拐点之间的连线
                color: "#ff3471", //拐点颜色
                fillColor: {
                  // 设置渐变的填充颜色
                  linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 0,
                  },
                  stops: [
                    [0, "rgba(255,228,88,0.2)"],
                    [1, "rgba(255,52,113,0.3)"],
                  ],
                },
                fillOpacity: 1,
              },
              {
                type: "area",
                name: _this.fundName2,
                data: _this.fundOverviewValue2,
                pointPlacement: "on",
                color: "#0768f8",
                fillColor: {
                  // 设置渐变的填充颜色
                  linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 0,
                  },
                  stops: [
                    [0, "rgba(196,44,255,0.2)"],
                    [1, "rgba(7,104,248,0.3)"],
                  ],
                },
                fillOpacity: 1,
              },
            ],
          },
          function (chart) {
            let yAxis = chart.yAxis[0];
            // 给坐标的 labelGroup 添加点击事件
            Highcharts.addEvent(
              yAxis.labelGroup.element,
              "click",
              function (e) {}
            );
          }
        );
      });
    },
  },
};
</script>

<style lang="scss">
.radarCon {
  width: 100%;
  height: 5.46rem;
  background-color: #fff;
  overflow: hidden;

  .noNet {
    opacity: 1;
    font-size: 0.24rem;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #999999;
    line-height: 5rem;
  }

  .loading {
    opacity: 1;
    font-size: 0.24rem;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #999999;
    line-height: 5rem;
  }
}
</style>
